<template>
  <el-form
    :model="_queryParams"
    :rules="rules"
    ref="categoryRef"
    label-width="85px"
    :disabled="!$permission('categoryFile:save') || isAllCate"
  >
    <div class="layui-btn-container border-style-bottom">
      <el-button
        v-if="$permission('categoryFile:save')"
        type="primary"
        claer
        size="small"
        @click="handleQuery"
        >保存</el-button
      >
      <!-- <el-button
        v-if="$permission('categoryFile:save')"
        size="small"
        @click="resetQuery"
        >取消</el-button
      > -->
    </div>
    <div style="display:flex">
      <el-form-item label="目录名称" prop="categoryName">
        <el-input
          v-model="_queryParams.categoryName"
          placeholder="请输入目录名称"
          clearable
          size="small"
          style="width: 240px"
          maxlength="64"
        />
      </el-form-item>
      <el-form-item label="编号规则" prop="codeRule">
        <el-input
          v-model="_queryParams.codeRule"
          placeholder="请输入编号规则"
          clearable
          size="small"
          style="width: 240px"
          maxlength="64"
        />
      </el-form-item>
      <el-form-item label="标识" prop="status">
        <el-radio-group
          style="width: 240px"
          @change="
            (val) => {
              emits('change', val)
            }
          "
          v-model="_queryParams.status"
        >
          <el-radio label="1">启用</el-radio>
          <el-radio label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup name="categoryForm">
const { proxy } = getCurrentInstance()
const props = defineProps({
  queryParams: {
    type: Object,
    default: () => {
      return {}
    },
  },
  isAllCate: {
    type: Boolean,
    default: true,
  },
  form: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const emits = defineEmits()

const validateLetterNum = (rule, value, callback) => {
  if (value === '' || value === undefined) {
    callback(new Error('请输入编号规则'))
  } else {
    // 最多输入64个字符，并且以小写字母开头
    let reg = /^[a-z]{1}([A-Za-z0-9]{0,63})$/
    if (!reg.test(value)) {
      callback(
        new Error('编号规则只能由英文字母、数字组成，且必须以小写字母开头')
      )
      return
    }
    callback()
  }
}
const rules = reactive({
  categoryName: [
    { required: true, message: '请输入目录名称', trigger: 'blur' },
    { min: 0, max: 64, message: '长度不能大于64个字符', trigger: 'change' },
  ],
  codeRule: [
    {
      required: true,
      trigger: 'blur',
      validator: validateLetterNum,
    },
  ],
})

const _queryParams = computed({
  get() {
    return props.queryParams
  },
  set(val) {
    emits('update:queryParams', val)
  },
})

// 提交表单前进行校验
async function submitForm(formName) {
  let tempBool = false
  await proxy.$refs['categoryRef'].validate((valid) => {
    if (valid) {
      tempBool = true
    } else {
      tempBool = false
      return false
    }
  })
  return tempBool
}

function resetFormtest() {
  proxy.resetForm('categoryRef')
}

function handleQuery() {
  emits('handleQuery')
}

function resetQuery() {
  emits('resetQuery')
}
defineExpose({
  submitForm,
  resetFormtest,
})
</script>

<style lang="scss" scoped>
/* .save-container {
  float: right;
} */
</style>
